<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>

        // 来复习一下vue2  
        let obj = {} // 给这个对象设置值/修改值的时候 如果才能通知dom结构更新？
        // 给obj添加一个data的属性  使用Object.definedProperty属性 这个属性有get、set方法
        let box = document.querySelector('#box') // 让obj和dom元素关联 就是响应式框架最基础的实现
        Object.defineProperty(obj ,"data" ,{
            get(){
                console.log('get'); // 访问obj.data 就会触发
                return box.innerHTML
            },
            set(res){
                console.log(res , 'set'); // 修改data的值时触发
                box.innerHTML = res
            }
        })
        console.log(obj);

        // 从上面例子就能看出  Object.defineProperty的缺点 每次只能监听一个属性 且 只能拦截对象


    </script>
</body>
</html>